<script setup>
import { ref, onMounted, computed } from 'vue' 
import { getCartList } from '../api' 
import useCart from '../stores/cart'
import cartEmptyImage from '../assets/images/cart_empty.png'
import { showToast } from 'vant'

const { cart , removeCart} = useCart()

const goodsList = ref([])
const allChecked = ref(false)

onMounted(async () => {
  await loadCart()
  onCheck() 
})


// 总金额
const total = computed(() => { 
  let sum = 0
goodsList.value.forEach(item => { 
  if (item.cart.checked) {
sum += item.price * item.cart.num
} })
return sum })

// 全选
const onCheckAll = () => {
goodsList.value.forEach(el => {
el.cart.checked = allChecked.value })
}
// 去结算
const onSubmit = () => {
showToast('暂无后续逻辑~')
}
//商品都被选中时，全选按钮高亮 
const onCheck = () => {
  allChecked.value = goodsList.value.every(
    el => el.cart.checked) 
}


// 加载购物车数据
const loadCart = async () => {
const ids = cart.map(item => item.id)
goodsList.value = await getCartList({ ids: ids.join(',') }) 
goodsList.value.forEach(goods => {
goods.cart = cart.find(item => goods.id == item.id) })
}
// 删除商品
const onDelete = item => { 
  const id = item.id
goodsList.value.forEach((item, index) => { 
  if (item.id == id) {
goodsList.value.splice(index, 1)
} })
removeCart(id) 
}
</script>
<template>
  <div class="cart">
    <div class="cart-container">
      <van-empty v-show="goodsList.length == 0" description="购物车目前还没有商品" :image="cartEmptyImage">
        <router-link :to="{ name: 'category' }">
          <van-button round type="danger" class="bottom-button">去购物</van-button>
           </router-link>
          </van-empty>
  <!-- 购物车列表 -->
  <div v-for="item in goodsList" :key="item.id" class="list"> <van-swipe-cell>
<!-- 复选框 -->
  <div class="checkbox">
<van-checkbox :name="item" v-model="item.cart.checked" @change="onCheck" checked-color="#f11a27"></van-checkbox>
</div>
<!-- 商品图片 -->
<div class="image">
<router-link :to="{ name: 'goodsDetail', params: { id: item.id} }">
<van-image width="50" height="50" :src="item.picture" /> </router-link>
</div>
<!-- 商品信息 -->
<div class="goods-info">
<div>{{ item.name }}</div> <div class="bottom">
<div class="price"><span>￥</span>{{ item.price }}</div>
<van-stepper  v-model="item.cart.num" theme="round" button-s ize="22" disable-input />
</div> 

</div>
<!-- 左滑删除 -->  <template #right>
<van-button aquare icon="delete" type="danger" class="delete-button" @click="onDelete(item)" />

</template>
</van-swipe-cell>
</div> 
</div>
</div>
<!-- 结算 -->
<van-submit-bar v-show="goodsList.length" :price="total * 100" button-text="去结算" button-type="primary" @submit="onSubmit" class="settlement">
<van-checkbox v-model="allChecked" checked-color="#f11a27" @click="onCheckAll">全选</van-checkbox> 
</van-submit-bar>
</template>
<style lang="less" scoped> 
.cart {
  margin: 0.3rem;
  padding: .05rem 0 3rem 0;
.cart-container {
margin-top: 1rem; 
.list {
  position: relative; 
  height: 5rem;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #ccc; 
  margin-bottom: 1rem;
.checkbox {
  position: absolute; 
  top: 1.7rem;
  left: .2rem;
 }
.image {
  position: absolute; 
  top: .7rem;
  left: 2rem; 
}
.goods-info {
  height: 5rem;  
  display: flex;
  justify-content: space-around; 
  flex-direction: column;
  padding: 0 1rem 0 6rem;
.bottom {
  display: flex;
  justify-content: space-between; 
  align-items: center;
.price {
  color: #c82519;
  font-size: .45rem; 
}
} 
}
.delete-button { 
  width: 2rem;
  height: 100%;
}
}
.bottom-button { 
  width: 7rem;
  height: 2rem;
} }
.settlement {
  margin-bottom: -0.1rem; 
}
}
:deep(.van-submit-bar) { 
  bottom: 3.5rem;
}
:deep(.van-swipe-cell) { 
  width: 100%;
}
</style>